<template>
	<view class="">
		
		<view class="topTabBar" :style="{position:headerPosition,top:headerTop}">
			<view class="grid" v-for="(grid,tbIndex) in orderType" :key="tbIndex" @tap="showType(tbIndex)">
				<view class="text" :class="[tbIndex==tabbarIndex?'on':'']">{{grid}}</view>
			</view>
		</view>
		<view class="orderList">
			
			<!-- 没有订单 -->
			<view class="oneNoorder" v-if="ordervwtext.length == 0">
				<image src="../../../static/images/noorder.png" mode=""></image>
				<view>没有相关订单</view>
			</view>
			
			<view class="orderExamine" v-for="(itme,index) in ordervwtext" :key="index">
				<view class="examineDai" @click="pamentdj(this)">
					<view class="mineImg">
						<!-- 用此图片来判断是什么类型的订单（酒店、线路、景点） -->
						<image :src="itme.orderimg" mode=""></image>
						<view class="examineId">{{itme.examinename}}</view>
					</view>
					<view class="examineZt">{{orderstate[itme.Identification]}}</view>
				</view>
				<view class="imgHead" @click="pamentdj(this)">
					<image :src="itme.examineone" mode=""></image>
					<view class="imgheadOrder">
						<view>下单时间：{{itme.examinetwo}}</view>
						<view>数量：{{itme.examinetnmber}}</view>
						<view>总价：￥{{itme.examinemonry}}</view>
					</view>
				</view>
				<view class="waitForsh">
					<view v-if="itme.Identification == 'staexamine'" @click="exbtndj(this)">取消订单</view>
					<view v-if="itme.Identification == 'stapayment'" @click="exbtndj(this)">取消订单</view>
					<view v-if="itme.Identification == 'stapayment'" @click="pamentfk">去付款</view>
					<view v-if="itme.Identification == 'stause'" @click="refund">申请退款</view>
					<view v-if="itme.Identification == 'stause'" @click="pamentdj">去使用</view>
					<view v-if="itme.Identification == 'staevaluate'" @click="evaluadj">评价</view>
					<view v-if="itme.Identification == 'staevaluate'" @click="againdj">再来一单</view>
					<view v-if="itme.Identification == 'starefund'" @click="pamentdj">退款进度</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				headerPosition:"fixed",
				headerTop:"0px",
				orderType: ['全部','待审核','待付款','待使用','待评价','退款'],
				tabbarIndex:0,
				option:[
					[{
						Identification: 'staexamine',
						orderimg:'../../../static/images/user/hoehtimgaes.png',
						examinename:'贵州海峡阳光大酒店',
						examineone:'../../../static/images/bannergy.jpg',
						examinetwo:'2019-07-25',
						examinetnmber:'1',
						examinemonry:'1888.00',
					},
					{
						Identification: 'stapayment',
						orderimg:'../../../static/images/user/hoehtimgaes.png',
						examinename:'贵州海峡阳光大酒店',
						examineone:'../../../static/images/bannergy.jpg',
						examinetwo:'2019-07-25',
						examinetnmber:'1',
						examinemonry:'1888.00',
					},
					{
						Identification: 'stause',
						orderimg:'../../../static/images/user/hoehtimgaes.png',
						examinename:'贵州海峡阳光大酒店',
						examineone:'../../../static/images/bannergy.jpg',
						examinetwo:'2019-07-25',
						examinetnmber:'1',
						examinemonry:'1888.00',
					},
					{
						Identification:'staevaluate',
						orderimg:'../../../static/images/user/hoehtimgaes.png',
						examinename:'贵州海峡阳光大酒店贵州海峡阳光大酒店贵州海峡阳光大酒店',
						examineone:'../../../static/images/bannergy.jpg',
						examinetwo:'2019-07-25',
						examinetnmber:'1',
						examinemonry:'1888.00'
					},
					{
						Identification: 'starefund',
						orderimg:'../../../static/images/user/hoehtimgaes.png',
						examinename:'贵州海峡阳光大酒店',
						examineone:'../../../static/images/bannergy.jpg',
						examinetwo:'2019-07-25',
						examinetnmber:'1',
						examinemonry:'1888.00',
					}],
					// 待审核
					[
						
					],
					// 待付款
					[{
						Identification: 'stapayment',
						orderimg:'../../../static/images/user/hoehtimgaes.png',
						examinename:'贵州海峡阳光大酒店',
						examineone:'../../../static/images/bannergy.jpg',
						examinetwo:'2019-07-25',
						examinetnmber:'1',
						examinemonry:'1888.00',
					}],
					// 待使用
					[{
						Identification: 'stause',
						orderimg:'../../../static/images/user/hoehtimgaes.png',
						examinename:'贵州海峡阳光大酒店',
						examineone:'../../../static/images/bannergy.jpg',
						examinetwo:'2019-07-25',
						examinetnmber:'1',
						examinemonry:'1888.00',
					}],
					// 待评价
					[{
						Identification: 'staevaluate',
						orderimg:'../../../static/images/user/hoehtimgaes.png',
						examinename:'贵州海峡阳光大酒店',
						examineone:'../../../static/images/bannergy.jpg',
						examinetwo:'2019-07-25',
						examinetnmber:'1',
						examinemonry:'1888.00',
					}],
					// 退款
					[{
						Identification: 'starefund',
						orderimg:'../../../static/images/user/hoehtimgaes.png',
						examinename:'贵州海峡阳光大酒店',
						examineone:'../../../static/images/bannergy.jpg',
						examinetwo:'2019-07-25',
						examinetnmber:'1',
						examinemonry:'1888.00',
					}],
				],
				// 订单
				ordervwtext:[],
				
				// 订单状态
				orderstate:{
					staexamine: '待审核',
					stapayment: '待付款',
					stause:'待使用',
					staevaluate:'待评价',
					starefund: '退款',
				},
				
			}
		},
		created(){
			var tabIndex = uni.getStorageSync('tbIndex');
			this.tabbarIndex = tabIndex+1;
			this.showType(this.tabbarIndex);
		},
		onLoad(option){
			//兼容H5下排序栏位置
			// #ifdef H5
				let Timer = setInterval(()=>{
					let uniHead = document.getElementsByTagName('uni-page-head');
					if(uniHead.length>0){
						this.headerTop = uniHead[0].offsetHeight+'px';
						clearInterval(Timer);//清除定时器
					}
				},1);
			// #endif
		},
		methods: { 
			tabChange(index) {
				this.TabCur = index;
			},
			showType(tbIndex){
				this.tabbarIndex = tbIndex;
				this.ordervwtext = this.option[tbIndex];
				let Numlen = this.option.length;
				// console.log(this.tabbarIndex);
				for(let i=0;i<Numlen;i++){
					let content = this.option[i];
					let conlenght = content;
					this.tabbarIndex == conlenght;
				}
			},
			exbtndj(t){
				uni.showModal({
					title: '提示',
					content: '是否确定取消订单？',
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			pamentdj(t){
				uni.navigateTo({
					url:'hotelorder'
				})
			},
			evaluadj(){
				uni.navigateTo({
					url:'evaluate'
				})
			},
			refund(){
				uni.navigateTo({
					url:'refund/refund'
				})
			},
			againdj(){
				uni.navigateTo({
					url:'../../line/line-dateils'
				})
			},
			pamentfk(){
				uni.navigateTo({
					url:'payment'
				})
			}
			
		}
		
	}
</script>

<style>
	@import "../../../components/personalcenter/orderlist";
	.stic-Harbour{
		background: #fbfbfb;
		padding: 0;
	}
	.stic-Harbour{
		padding: 0;
		border: ;
	}
	.grid{
		width: 20%;
		height: 80upx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #444;
		font-size: 28upx;
	}
	.grid .text{
		height: 90upx;
		font-size: 32upx;
		display: flex;
		align-items: center; 
	}
	.on{
		color: #f06c7a;
		border-bottom: solid 8upx #f06c7a;
	}
	
	.topTabBar{
		width: 100%;
		position: fixed;
		top: 0upx;
		z-index: 10;
		background-color: #fff;
		height: 90upx;
		display: flex;
		justify-content: space-around;
	}
	page{
		background: #F8F8F8;
	}
</style>
